<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html 表单练习</title>
</head>
<body>
    <h1>表单练习</h1>
    <form action="html_form_action.php" method="post">
        <!--文本输入框-->
        <label for="name">用户名：</label>
        <input type="text" name="name" id="name" placeholder="请输入用户名" required>
        <br></br>
        <!--密码输入框-->
        <label for="password">密码：</label>
        <input type="password" name="password" id="password" placeholder="请输入密码" required>
        <br></br>
        <!--单选框-->
        <label for="gender">性别：</label>
        <input type="radio" name="male" id="gender" value="male" checked>
        <label>男</label>
        <input type="radio" id="gender" name="female" value="female">
        <label>女</label>
        <br>
        <!--复选框-->
        <input type="checkbox" id="subscribe" name="subscribe" value="subscribe" checked>
        <label for="订阅该推送">订阅该推送</label>
        <br>
        <!--下拉列表-->
        <label for="country">国家：</label>
        <select name="country" id="country">
            <option value="cn">中国</option>
            <option value="usa">美国</option>
            <option value="uk">英国</option>
        </select>
        <br>
        <input type="submit" value="提交">
    </form>

    <!-- 以下表单使用 GET 请求发送数据到当前的 URL，method 默认位 GET。 -->
<form>
    <label>Name:
      <input name="submitted-name" autocomplete="name">
    </label>
    <button>Save</button>
  </form>
  
  <!-- 以下表单使用 POST 请求发送数据到当前的 URL。 -->
  <form method="post">
    <label>Name:
      <input name="submitted-name" autocomplete="name">
    </label>
    <button>Save</button>
  </form>
  
  <!-- 表单使用 fieldset, legend, 和 label 标签 -->
  <form method="post">
    <fieldset>
      <legend>Title</legend>
      <label><input type="radio" name="radio"> Select me</label>
    </fieldset>
  </form>
  
  <iframe src="http://127.0.0.1:5500/html%E5%85%A5%E9%97%A8/demo-05.html" frameborder="0" name="iframe-a" width="1000px"></iframe>
  <p><a href="https://objtube.github.io/front-end-roadmap/#/front-end-roadmap/guide/html" target="iframe-a" rel="noopener">前端学习路线</a></p>
  
  <iframe src="https://www.runoob.com/html/html-iframes.html" frameborder="0" width="1000px"></iframe>

  <!--RGBA 的意思是（Red-Green-Blue-Alpha）它是在 RGB 上扩展包括了 “alpha” 通道，运行对颜色值设置透明度。-->
  <p style="background-color:rgb(255,255,0)">
    通过 rgba 值设置背景颜色
    </p>
    <p style="background-color:rgba(255,255,0,0.25)">
    通过 rgba 值设置背景颜色
    </p>
    <p style="background-color:rgba(255,255,0,0.5)">
    通过 rgba 值设置背景颜色
    </p>
    <p style="background-color:rgba(255,255,0,0.75)">
    通过 rgba 值设置背景颜色
    </p>
    <hr>
    <h1>我的第一个javascript</h1>
    <p id="demo">JavaScript 可以触发事件，就像按钮点击。</p>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "HELLO JAVASCRIPT！";
        }
    </script>
    <button type="button" onclick="myFunction()">&lt;点我&gt;</button>
</body>
</html>